<template>
	<!-- /pages/user/cart/index -->
	<view style="background-color: #f2f2f2;position: relative;">
		<view ref="fixedTop" style="position: fixed;top:0;z-index: 99;">
			<com-nav-bar :fixed="true" @clickLeft="back" left-icon="back" title="购物车"></com-nav-bar>
			<view style="background-color: #fff;display: flex;justify-content: space-between;padding: 30rpx;">
				<view>已加购{{pagination.total_count}}款产品</view>
				<view @click="checkCtrStatusHandler">{{ctrStatus ? '完成' : '管理'}}</view>
			</view>
		</view>
	
	
		<view style="background-color: #fff;padding: 0rpx 10rpx 100rpx;" :style="{marginTop:fixedTopHeight+10+'px'}">
			<view class="record-item" v-for="(item,index) in cartList" :key="item.id">
				<view v-line-clamp="1" style="font-size: 13pt;font-weight: 600;margin-bottom: 20rpx;">{{ item.store_name }}</view>
				<view style="display: flex;align-items: center;margin: 10rpx 0;">
					<view style="margin-right: 10rpx;">
						<u-checkbox @change="checkChangeHandler" shape="circle" v-model="item.checked" :name="index"></u-checkbox>
					</view>
					<view style="display: flex;">
						<image style="width: 200rpx;height: 200rpx;margin-right: 10rpx;flex-shrink:0;" lazy-load="true" :src="item.cover_pic"></image>
						<view style="height:200rpx;display: flex;flex-direction: column;justify-content: space-between;flex-grow: 1;">
							<view v-line-clamp='2' style="font-size: 28rpx;height: 56rpx;line-height: 28rpx;">{{item.goods_name}}</view>
							<view v-line-clamp='1' style="font-size: 10pt;color: #909399;">{{item.attr_str}}</view>
							<view style="color:red;font-size: 12pt;font-weight: 600;">￥{{item.total_price}}</view>
							<view><u-number-box v-model="item.goods_num" :min="1" @change="goodsNumChange" :index="index"></u-number-box></view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore style="padding: 50rpx 0;" :status="loadStatus" />
		</view>
	
		<view class="fixed-bottom">
			<template v-if="ctrStatus">
				<view style="display: flex;justify-content: space-between;align-items: center;padding: 0 20rpx;flex: 4;">
					<view>
						<u-checkbox @change="allcheckedHandler" shape="circle" v-model="allChecked">全选</u-checkbox>
					</view>
					<view>
						<view>已选{{checkedList.length}}个</view>
					</view>
				</view>
				<view style="background-color: red;color:#fff;padding: 30rpx 80rpx;flex: 1;text-align: center;" @click="checkedRemove">删除</view>
			</template>
			<template v-else>
				<view style="display: flex;justify-content: space-between;align-items: center;padding: 0 20rpx;flex: 4;">
					<view> 已选{{checkedList.length}}个 </view>
					<view>
						<view>合计：<text style="color:red">￥{{checkedTotalPrice.toFixed(2)}}</text></view>
					</view>
				</view>
				<view style="background-color: red;color:#fff;padding: 30rpx 80rpx;flex: 1;text-align: center;" @click="checkedSettle">去结算</view>
			</template>
		</view>
	
	</view>
</template>

<script>
	let that;
	export default{
		data(){
			return {
				cartList:[],
				pagination:{
					current_page:1,
					page_count:0,
					total_count:0
				},
				fixedTopHeight:0,
				loadingStatus:'loadmore',
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '已经到底了'
				},
				checkedList:[],
				ctrStatus: false,
				checkedTotalPrice: 0,
				allChecked:false
			}
		},
		beforeCreate(){
			that = this;
		},
		onShow(){
			this.$nextTick(function(){
				that.fixedTopHeight = Math.ceil(that.$refs.fixedTop.$el.clientHeight);
			})
		},
		onLoad(opt){
			this.getCartList();
		},
		methods:{
			back(){
				this.navBack()
			},
			async getCartList(){
				this.loadStatus = 'loading';
				const res = await this.$http.request({
					url: this.$api.userCart.list,
					method: 'get',
					showLoading:true,
				});
				this.loadStatus = 'nomore';
				if(res.code !== 0){
					return this.$http.toast(res.msg);
				}
				this.cartList = this.cartList.concat(res.data.list);
				this.pagination = res.data.pagination;
				if (this.pagination.current_page < this.pagination.page_count) {
					this.loadStatus = 'loadmore';
				}
			},
			initData(){
				this.cartList = [];
				this.pagination = {
					current_page:1,
					page_count:0,
					total_count:0
				};
				this.checkedList = [];
				this.checkedTotalPrice = 0;
			},
			
			checkChangeHandler(opt){
				let item = this.cartList[opt.name];
				let price = parseFloat(item.total_price);
				
				if(opt.value == true){
					this.checkedList.push(opt.name);
					this.checkedTotalPrice = this.checkedTotalPrice + price;
				}else{
					let index = this.checkedList.findIndex(item => {
						return item === opt.name
					})
					this.checkedList.splice(index,1);
					this.checkedTotalPrice = this.checkedTotalPrice - price;
				}
			},
			checkCtrStatusHandler(){
				this.ctrStatus = !this.ctrStatus
			},
			checkedSettle(){
				if( this.checkedList.length <= 0) return this.$http.toast('没有需要结算的购物车');
				let cart_ids = [];
				this.checkedList.map( item => {
					cart_ids.push(this.cartList[item].id);
				});
				cart_ids = JSON.stringify(cart_ids)
				uni.navigateTo({url:'/pages/order/preview?cart_ids='+cart_ids})
			},
			async checkedRemove(){
				if( this.checkedList.length <= 0) {
					return this.$http.toast('没有需要移除的购物车');
				}
				uni.showModal({
					title:"温馨提示",
					content:"您确定要删除吗？",
					confirmText:"确定删除",
					cancelText:'我再想想',
					async success(res){
						if(res.confirm){
							let cart_ids = [];
							that.checkedList.map( item => {
								cart_ids.push(that.cartList[item].id);
							});
							const res = await that.$http.request({
								url: that.$api.userCart.remove,
								method: 'post',
								data:{cart_ids},
								showLoading:true
							})
							if(res.code !== 0){
								return that.$http.toast(res.msg);
							}
							that.initData();
							that.getCartList();
						}
					}
				})				
			},
			
			allcheckedHandler(opt){
				let checkList = [];
				let totalPrice = 0;
				if(opt.value){
					this.cartList.map((item,index) => {
						checkList.push(index);
						item.checked = true;
						let price = parseFloat(item.total_price);
						totalPrice = totalPrice + price;
					})
				}else{
					this.cartList.map(item => {
						item.checked = false;
					})
				}
				this.checkedList = checkList;
				this.checkedTotalPrice = totalPrice;
			},
			async goodsNumChange(opt){
				let cart_id = this.cartList[opt.index].id;
				let goods_num = opt.value;
				const res = await this.$http.request({
					url: this.$api.userCart.changeNum,
					method: 'post',
					data:{cart_id,goods_num},
					showLoading:true
				});
				if(res.code !== 0){
					return this.$http.toast(res.msg);
				}
				this.cartList[opt.index].total_price = res.data.total_price;
				let checkedTotalPrice = 0;
				this.checkedList.map(item => {
					checkedTotalPrice = parseFloat(checkedTotalPrice + this.cartList[item].total_price);
				})
				this.checkedTotalPrice = checkedTotalPrice;
			}
		}
	}
</script>

<style lang="scss">
	.record-item{
		margin: 0 20rpx;
		padding: 20rpx 0rpx;
		border-bottom: 1rpx solid #ececec;
	}
	
	.fixed-bottom{
		position: fixed;
		bottom: 0;
		z-index: 999;
		background-color: #fff;
		width: 100vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 0rpx solid transparent;
		box-shadow: 0 -2rpx 4rpx -2rpx rgba(0, 0, 0, 0.5); /* 上边框的阴影 */
	}
</style>